import React from 'react';
import { Row, Col } from 'antd';
import logo from '../../images/login_logo.png'
import phone from '../../images/login_phone.png'
import {Input,Checkbox,message} from 'antd'
import {WechatOutlined,MobileOutlined} from '@ant-design/icons'
import {inject,observer} from 'mobx-react'
import * as url from '../../util/api'
import axios from '../../util/http'
import './Login.css'
@inject('loginStore')
@observer
class Login extends React.Component {
    constructor(){
        super()
        this.state={
            loginvisible:'block',
            registervisible:'none',
            logincolor:'white',
            registercolor:'gray',
            username:'',
            tel:'',
            password:'',
            registerusername:'',
            registervalue:'',
            registerpwdvalue:'',
            registerrepwd:'',
        }
    }
    userloginchange=()=>{
        this.setState({
            loginvisible:'block',
            registervisible:'none',
            logincolor:'white',
            registercolor:'gray'
        })
    }
    useregisterchange=()=>{
        this.setState({
            loginvisible:'none',
            registervisible:'block',
            logincolor:'gray',
            registercolor:'white'
        })
    }
    inputuservalue=(e)=>{
        this.setState({
            tel:e.target.value
        })
    }
    inputpwdvalue=(e)=>{
        this.setState({
            password:e.target.value
        })
    }
    userlogin=()=>{
        let {tel,password}=this.state
        let obj={tel,password}
        if(/^1[3456789]\d{9}$/.test(tel)){
            this.props.loginStore.loginIn(obj).then(res=>{
                if(res===200){
                    message.loading('正在加载...', 0.5)
                        .then(() => message.success('登录成功', 1))
                    this.props.history.push('/homepage')
                }else {
                    message.loading('正在加载...', 0.5)
                        .then(() => message.error('登录失败', 1))
                    this.props.history.push('/login')
                }
            })
        }else {
            message.error('手机格式错误，请重新输入')
        }

    }
    inputregusernamevalue=(e)=>{
        this.setState({
            registerusername:e.target.value
        })
    }
    inputregvalue=(e)=>{
        this.setState({
            registervalue:e.target.value
        })

    }
    checktel=()=>{
        let tel=this.state.registervalue
        if(/^1[3456789]\d{9}$/.test(this.state.registervalue)){
            axios({
                url:url.checktel,
                method:'post',
                data:{tel}
            }).then(res=>{
                if(res.data.code===400){
                    message.error(res.data.msg)
                }else {
                    message.success(res.data.msg)
                }
            })
            return true
        }else {
            message.error('手机格式不正确')
            return false
        }
    }
    checkusername=()=>{
        if(!(/^[\u4E00-\u9FA5A-Za-z0-9]+$/ .test(this.state.registerusername))){
            message.error('用户名只能是中文，字母，数字')
            return false
        }else {
            return true
        }
    }
    checkpwd=()=>{
        let {registerpwdvalue,registerrepwd}=this.state
        if(registerpwdvalue===registerrepwd){
            return true
        }else {
            message.error('两次密码输入不一致，请重新输入')
            return false
        }
    }
    inputregpwdvalue=(e)=>{
        this.setState({
            registerpwdvalue:e.target.value
        })
    }
    inputregrepwdvalue=(e)=>{
        this.setState({
            registerrepwd:e.target.value
        })
    }
    useregister=()=>{
        let {registerpwdvalue,registervalue,registerusername}=this.state
        let obj={
            password:this.state.registerpwdvalue,
            tel:this.state.registervalue,
            username:this.state.registerusername,
        }
        if(registerpwdvalue!==''&&registervalue!==""&&registerusername!==""){
            if(this.checktel&&this.checkpwd&&this.checkusername){
                this.props.loginStore.register(obj).then(res=>{
                    if(res===200){
                        message.loading('正在加载...', 0.5)
                            .then(() => message.success('注册成功', 1))
                    }
                })
            }
        }else {
            message.error('内容不能为空')
        }

    }

    render() {
        return (
            <div className='logincontainer'>
                <Row>
                    <Col span={12}>
                        <div className='login_logoimg'>
                            <img  src={logo} alt="404"/>
                        </div>
                        <div className='login_phoneimg'>
                            <img style={{width:'72%'}} src={phone} alt="404"/>
                        </div>
                    </Col>
                    <Col span={12}>
                        <div className='login_content' style={{width:'52%'}}>
                            <div className='login_title'>
                                <span style={{color:this.state.logincolor}} onClick={this.userloginchange}>登录</span>
                                <span style={{color:this.state.registercolor}} onClick={this.useregisterchange}>注册</span>
                            </div>
                            <div className='userlogin' style={{display:this.state.loginvisible}}>
                                <Input className='input' style={{margin:'10px 0'}} placeholder='请输入手机号码' type='text' value={this.state.tel} onChange={this.inputuservalue}/>
                                <br/>
                                <Input className='input' style={{margin:'10px 0'}} placeholder='请输入密码' type='password' value={this.state.password} onChange={this.inputpwdvalue}/>
                                <div className='remmber'>
                                    <span>
                                        <Checkbox/>
                                        &nbsp;
                                        记住用户名
                                    </span>
                                    <span className='mima'>
                                        忘记密码？
                                    </span>
                                </div>
                                <button className='btn_login' onClick={this.userlogin}>登录</button>
                                <div className='loginfooter'>
                                    <span>
                                        <WechatOutlined/>
                                        &nbsp;
                                        企业微信登录
                                    </span>
                                    <span>
                                        <MobileOutlined/>
                                        &nbsp;
                                        手机下载
                                    </span>
                                </div>
                            </div>
                            <div className='useregister' style={{display:this.state.registervisible}}>
                                <Input className='input' style={{margin:'10px 0'}} placeholder='请输入用户名' type='text' value={this.state.registerusername} onChange={this.inputregusernamevalue} onBlur={this.checkusername}/>
                                <br/>
                                <Input className='input' style={{margin:'10px 0'}} placeholder='请输入手机号码' type='text' value={this.state.registervalue} onChange={this.inputregvalue} onBlur={this.checktel}/>
                                <br/>
                                <Input className='input' style={{margin:'10px 0'}} placeholder='请输入密码' type='password' value={this.state.registerpwdvalue} onChange={this.inputregpwdvalue}/>
                                <br/>
                                <Input className='input' style={{margin:'10px 0'}} placeholder='请再次输入密码' type='password' value={this.state.registerrepwd} onChange={this.inputregrepwdvalue} onBlur={this.checkpwd}/>
                                <div className='goto'>
                                    <Checkbox checked={true}/>
                                    &nbsp;
                                    我已同意<a href="https://www.dinghuo123.com/product/productService.html#f">服务条款</a>，以及<a href="https://www.dinghuo123.com/product/productService.html#e">隐私政策</a>
                                </div>
                                <button className='btn_register' onClick={this.useregister}>免费开通</button>
                            </div>
                        </div>
                    </Col>
                </Row>
            </div>
        );
    }
}

export default Login;